<template>
<h2>修改房型页面</h2>

<table class="table table-bordered">
     
        <tr>
            <th>房型名称</th>
            <th>
                <input type="text" v-model="Add1.fname">
            </th>
        </tr>    

        <tr>
            <th>房型单价</th>
            <th>
                <input type="text" v-model="Add1.price">
            </th>
        </tr>    

        <tr>
            <th>室内面积</th>
            <th>
                <input type="text" v-model="Add1.mianJI">
            </th>
        </tr>    
        <tr>
            <th>最多居住人数</th>
            <th>
                <input type="text" v-model="Add1.num">
            </th>
        </tr>   

        <tr>
            <th>房型图片</th>
            <th>
                <img :src="Add1.img" style="height: 100px; font-weight: 100px;">
              <input type="file" @change="UpFile">
            </th>
        </tr>    

        <tr>
            <th>描述</th>
            <th>
                <textarea v-model=" Add1.mianShu"></textarea>
            </th>
        </tr> 

        <tr>
            <th>是否有窗户</th>
            <th>
                <input type="radio" :value="true" v-model="Add1.isWindow">有窗
                <input type="radio" :value="false" v-model="Add1.isWindow">无窗
            </th>
        </tr> 

        <tr>
            <th></th>
            <th>
              <button @click="UpFangXIng()" class="btn btn-success"> 修改</button>
            </th>
        </tr> 

</table>





</template>


<script setup lang="ts">

import axios from 'axios';
import {onMounted, ref} from 'vue'

import { useRoute,useRouter,createRouter } from 'vue-router';

const router=useRouter();
const route=useRoute();
//修改的响应式数据
const Add1=ref({

"fid": route.params.id,
  "fname": "",
  "price": 0,
  "mianJI": 0,
  "num": 0,
  "img": "",
  "mianShu": "",
  "isWindow": true,
  "isDel": true

})


///上传图片的方法
const UpFile=(e:any)=>{

        var a =e.target.files[0];
        var bt = new FormData();
 
        bt.append('img1',a)

            axios.post('https://localhost:7247/api/UpFile/UpfiLe',bt).then(res=>{

                        
                Add1.value.img=res.data

            })

}

//修改方法
const UpFangXIng=()=>{


    if(Add1.value.fname=="")
{
    alert('房型名称不能为空')
    return ;
}

if(Add1.value.price.toString()=="")
{
    alert('房型单价不能为空')
    return ;
}

if(Add1.value.mianJI.toString()=="")
{
    alert('室内面积不能为空')
    return ;
}

if(Add1.value.num.toString()=="")
{
    alert('最多居住人数不能为空')
    return ;
}

if(Add1.value.img=="")
{
    alert('请上传图片')
    return ;
}

if(Add1.value.mianShu=="")
{
    alert('描述不能为空')
    return ;
}

    axios.put('https://localhost:7247/api/FangXing/UpdateFangXing',Add1.value).then(res=>{

        if(res.data>0)
    {
        alert('修改成功')
        router.push('/FangXIngShow')
    }
    else
    {
        alert('修改失败')
    }
    })

}


onMounted(()=>{  //钩子函数

    FanTian();
})
//反填方法

const FanTian=()=>{

    axios.get('https://localhost:7247/api/FangXing/FanTianFx',{params:{

        id:route.params.id,
    }}).then(res=>{

        Add1.value=res.data;
    })
}




</script>